<template>
  <Col v-if="showActionButtonGroup" v-bind="actionColOpt">
    <div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
      <Form.Item>
        <slot name="submitBefore"></slot>
        <a-button v-if="showSubmitButton" type="primary" class="mr-2" v-bind="getSubmitBtnOptions" @click="submit">
          {{ getSubmitBtnOptions.text }}
        </a-button>
        <slot name="resetBefore"></slot>
        <a-button v-if="showResetButton" type="default" class="mr-2" v-bind="getResetBtnOptions" @click="resetFields">
          {{ getResetBtnOptions.text }}
        </a-button>
        <slot name="advanceBefore"></slot>
        <a-button v-if="showAdvancedButton && !hideAdvanceBtn" type="link" size="small" @click="toggleAdvanced">
          {{ isAdvanced ? '收起' : '展开' }}
          <BasicArrow class="ml-1" :expand="!isAdvanced" />
        </a-button>
        <slot name="advanceAfter"></slot>
      </Form.Item>
    </div>
  </Col>
</template>
<script lang="ts" setup name="FormAction">
import { computed, CSSProperties, type PropType } from 'vue';
import { Form, Col } from 'ant-design-vue';
import { useFormContext } from '../hooks/useFormContext';
import type { ColEx } from '../types/component';
import type { ButtonProps } from '@/components/Button';
import { BasicArrow } from '@/components/BasicArrow';

type ButtonOptions = Partial<ButtonProps> & { text: string };

const emit = defineEmits(['toggle-advanced']);

const props = defineProps({
  showActionButtonGroup: {
    type: Boolean,
    default: true,
  },
  showResetButton: {
    type: Boolean,
    default: true,
  },
  showSubmitButton: {
    type: Boolean,
    default: true,
  },
  showAdvancedButton: {
    type: Boolean,
    default: true,
  },
  resetButtonOptions: {
    type: Object as PropType<ButtonOptions>,
    default: () => ({}),
  },
  submitButtonOptions: {
    type: Object as PropType<ButtonOptions>,
    default: () => ({}),
  },
  actionColOptions: {
    type: Object as PropType<Partial<ColEx>>,
    default: () => ({}),
  },
  actionStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({
      textAlign: 'right',
    }),
  },
  actionSpan: {
    type: Number,
    default: 6,
  },
  isAdvanced: Boolean,
  hideAdvanceBtn: Boolean,
});

const { resetFields, submit } = useFormContext();
const actionColOpt = computed(() => {
  const { showAdvancedButton, actionSpan: span, actionColOptions, actionStyle } = props;
  const actionSpan = 24 - span;
  const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
  const actionColOpt: Partial<ColEx> = {
    style: actionStyle,
    span: showAdvancedButton ? 6 : 4,
    ...advancedSpanObj,
    ...actionColOptions,
  };

  return actionColOpt;
});

const getResetBtnOptions = computed((): ButtonOptions => {
  return Object.assign(
    {
      text: '重置',
    },
    props.resetButtonOptions,
  );
});

const getSubmitBtnOptions = computed(() => {
  return Object.assign(
    {
      text: '查询',
    },
    props.submitButtonOptions,
  );
});

function toggleAdvanced() {
  emit('toggle-advanced', props.isAdvanced);
}
</script>
